<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>OpenGauss客户端</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <script src="./jquery.min.js"></script>
    <script src="./bootstrap.min.js"></script>
    <link rel="stylesheet" href="./codemirror.min.css" />
    <link rel="stylesheet" href="./material.min.css" />
    <script src="./codemirror.min.js"></script>
    <script src="./sql.min.js"></script>
</head>
<style>
    .CodeMirror {
        height: 26vh; /* 直接设置高度 */
    }
    .cm-s-default span {
        font-size: 16px !important; /* 设置字体大小 */
    }
    .menu {
        width: 100px;
        font-size: 14px;
        font-family: "微软雅黑";
        border: 1px solid #ccc;
        z-index: 9999;
        position: absolute;
        display: none;
        background: #f2f2f2;
    }

    .menu ul {
        margin: 0px;
        padding: 0px;
        text-align: center;
        list-style-type: none;
    }

    .menu ul li {
        padding: 3px 0px;
        font-size: 12px;
    }

    .menu ul li:hover {
        background: #e1dddd;
    }

    .menu ul li a:link {
        color: #000;
        text-decoration: none;
    }
    .first,.second{
        border:1px solid lightblue;
    }
    .big{
        /*display: flex;*/
        /*justify-content: flex-start;*/
        /*align-items: center;*/
        width:100%;
        height: 100vh;
        overflow: hidden;
    }
    .first{
        width:350px;
        float: left;
        height:100%;
    }
    .second{
        float: left;
        width:81.5%;
        height:100%;
        overflow: hidden;
    }
    .connection:hover{
        font-weight: bold;
    }
    #divmenu:hover{
        cursor: pointer;
    }
    .one{
        min-width: 250px;
        max-width:250px;
        float: left;
        height:100%;
        overflow-y: auto;
        border: 1px solid lightgray;
    }
    .two{
        float:left;
        width: 83.8%;
        height:100%;
        overflow: hidden;
    }
    .two-top{
        width:100%;
        height:10%;
    }
    .two-bottom{
        width:100%;
        height:70%;
        overflow: auto;
        border: 1px solid lightskyblue;
        margin-top: 1%;
    }
    .two-bottom table{
        width:100%;
        height:100%;
    }
    #oneul>li:hover{
        cursor: pointer;
        font-weight: bold;
        color: red;
    }
    .two-bottom table tr th{
        min-width: 150px;
        /*white-space: nowrap;*/
    }
    .two-bottom table tr td{
        min-width: 150px;
        /*white-space: nowrap;*/
    }
    #fountainG {
        position: fixed;
        margin: 20% auto 0% 43%;
    }

    .fountainG{
        position:absolute;
        top:0;
        background-color:#33cc99;
        width:20px;
        height:20px;
        -webkit-animation:bounce_fountainG 1.3s infinite normal;
        -moz-animation:bounce_fountainG 1.3s infinite normal;
        -o-animation:bounce_fountainG 1.3s infinite normal;
        -ms-animation:bounce_fountainG 1.3s infinite normal;
        animation:bounce_fountainG 0.8s infinite normal;
        -moz-transform:scale(.3);
        -webkit-transform:scale(.3);
        -ms-transform:scale(.3);
        -o-transform:scale(.3);
        transform:scale(.3);
        border-radius:19px;
    }

    #fountainG_1{
        left:0;
        -moz-animation-delay:0.52s;
        -webkit-animation-delay:0.52s;
        -ms-animation-delay:0.52s;
        -o-animation-delay:0.52s;
        animation-delay:0.52s;
    }

    #fountainG_2{
        left:30px;
        -moz-animation-delay:0.65s;
        -webkit-animation-delay:0.65s;
        -ms-animation-delay:0.65s;
        -o-animation-delay:0.65s;
        animation-delay:0.65s;
    }

    #fountainG_3{
        left:60px;
        -moz-animation-delay:0.78s;
        -webkit-animation-delay:0.78s;
        -ms-animation-delay:0.78s;
        -o-animation-delay:0.78s;
        animation-delay:0.78s;
    }

    #fountainG_4{
        left:90px;
        -moz-animation-delay:0.91s;
        -webkit-animation-delay:0.91s;
        -ms-animation-delay:0.91s;
        -o-animation-delay:0.91s;
        animation-delay:0.91s;
    }

    #fountainG_5{
        left:120px;
        -moz-animation-delay:1.04s;
        -webkit-animation-delay:1.04s;
        -ms-animation-delay:1.04s;
        -o-animation-delay:1.04s;
        animation-delay:1.04s;
    }

    #fountainG_6{
        left:150px;
        -moz-animation-delay:1.17s;
        -webkit-animation-delay:1.17s;
        -ms-animation-delay:1.17s;
        -o-animation-delay:1.17s;
        animation-delay:1.17s;
    }

    #fountainG_7{
        left:180px;
        -moz-animation-delay:1.3s;
        -webkit-animation-delay:1.3s;
        -ms-animation-delay:1.3s;
        -o-animation-delay:1.3s;
        animation-delay:1.3s;
    }

    #fountainG_8{
        left:210px;
        -moz-animation-delay:1.43s;
        -webkit-animation-delay:1.43s;
        -ms-animation-delay:1.43s;
        -o-animation-delay:1.43s;
        animation-delay:1.43s;
    }

    @-moz-keyframes bounce_fountainG{
        0%{
            -moz-transform:scale(1);
            background-color:#33cc99;
        }

        100%{
            -moz-transform:scale(.3);
            background-color:#0099cc;
        }

    }

    @-webkit-keyframes bounce_fountainG{
        0%{
            -webkit-transform:scale(1);
            background-color:#33cc99;
        }

        100%{
            -webkit-transform:scale(.3);
            background-color:#0099cc;
        }

    }

    @-ms-keyframes bounce_fountainG{
        0%{
            -ms-transform:scale(1);
            background-color:#33cc99;
        }

        100%{
            -ms-transform:scale(.3);
            background-color:#0099cc;
        }

    }

    @-o-keyframes bounce_fountainG{
        0%{
            -o-transform:scale(1);
            background-color:#33cc99;
        }

        100%{
            -o-transform:scale(.3);
            background-color:#0099cc;
        }

    }

    @keyframes bounce_fountainG{
        0%{
            transform:scale(1);
            background-color:#33cc99;
        }

        100%{
            transform:scale(.3);
            background-color:#0099cc;
        }

    }
</style>
<body>
<div id="fountainG">
    <div id="fountainG_1" class="fountainG">
    </div>
    <div id="fountainG_2" class="fountainG">
    </div>
    <div id="fountainG_3" class="fountainG">
    </div>
    <div id="fountainG_4" class="fountainG">
    </div>
<!--    <div id="fountainG_5" class="fountainG">-->
<!--    </div>-->
<!--    <div id="fountainG_6" class="fountainG">-->
<!--    </div>-->
<!--    <div id="fountainG_7" class="fountainG">-->
<!--    </div>-->
<!--    <div id="fountainG_8" class="fountainG">-->
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <table style="height: 100%;width: 100%;margin-top: 20px;" border="3">
                    <tr>
                        <td>数据库类型</td>
                        <td><select name="dbKind" id="dbKind">
                            <option value="OpenGauss">OpenGauss</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td>数据库IP</td>
                        <td><input id="ip" type="text" name="ip" required><span style="color: red;">*必填项</span></td>
                    </tr>
                    <tr>
                        <td>端口号</td>
                        <td><input id="port" type="text" name="port" required><span style="color: red;">*必填项</span></td>
                    </tr>
                    <tr>
                        <td>用户名</td>
                        <td><input id="username" type="text" name="username" required><span style="color: red;">*必填项</span></td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td><input id="password" type="password" name="password" required><span style="color: red;">*必填项</span></td>
                    </tr>
                    <tr>
                        <td>数据库</td>
                        <td><input id="databases" type="text" name="databases" required><span style="color: red;">*必填项</span></td>
                    </tr>
                    <tr>
                        <td>模式</td>
                        <td><input id="modes" type="text" name="modes" required><span style="color: red;">*必填项</span></td>
                    </tr>
                    <tr>
                        <td><input id="test" type="button" value="测试连接"><span style="color: red;">*必选项</span></td>
                    </tr>
            </table>
            <div class="modal-footer">
                <button id="close" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button disabled id="addMode" type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
<div class="big">
    <div class="first">
        <button style="margin:20px auto;margin-left: 20%;" type="button"
                data-toggle="modal" data-target="#myModal" class="btn btn-primary">新增OpenGauss连接</button>
        <a href="#" class="list-group-item active">
            模式列表
        </a>

    </div>
    <div class="second">
            <div class="one"  style="overflow: scroll;">
                <ul id="oneul" style="margin-top: 10px;list-style: none;margin-left: -15%;">

                </ul>
            </div>
            <div class="two">
                <div class="two-top">
                    <textarea id="code" style="" placeholder="输入OpenGauss的SQL语句..."></textarea>
                    <button id="execute" type="button" class="btn btn-primary"
                            style="float: right;margin-right: 3%;">执行SQL</button>
                </div>
                <div id="result" class="two-bottom">
                    暂未结果
                </div>
            </div>
    </div>
</div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">连接属性</h4>
            </div>
            <div class="modal-body">
                <table class="table">
                    <tbody>
                    <tr>
                        <td>数据库IP</td>
                        <td id="sjkip"></td>
                    </tr>
                    <tr>
                        <td>端口号</td>
                        <td id="dkh"></td>
                    </tr>
                    <tr>
                        <td>用户名</td>
                        <td id="yhm"></td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td id="mima">******</td>
                    </tr>
                    <tr>
                        <td>数据库</td>
                        <td id="sjk"></td>
                    </tr>
                    <tr>
                        <td>模式</td>
                        <td id="ms"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button id="close1" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var editor;
    $(document).ready(function () {
        // 初始化 CodeMirror 编辑器
            editor = CodeMirror.fromTextArea(document.getElementById("code"), {
            mode: "text/x-mysql", // SQL 语法模式
            theme: "default", // 主题
            lineNumbers: true, // 显示行号
            lineWrapping: true, // 自动换行
            matchBrackets: true, // 匹配括号
            autoCloseBrackets: true, // 自动闭合括号
            styleActiveLine: true, // 高亮当前行
            gutters: ["CodeMirror-linenumbers"], // 显示行号的槽
            extraKeys: {"Ctrl-Space": "autocomplete"} // 自定义快捷键
        });
    });
<!--  查询连接列表  -->
    $(function (){
        showList();
    });

function showList(){
    var loading = $('#fountainG');
    loading.show();
    $.get(
        "/mode/modeList",
        function (data) {
            for(var i=0;i<data.length;i++){
                $(".first").append("<a href=\"#\" class=\"list-group-item connection\">"+data[i].ip +">"+ data[i].dataBaseName+">"+data[i].modeName+"" +
                    "<br/>\n" +
                    "            <button onclick='tableList(\""+data[i].ip +">"+ data[i].dataBaseName+">"+data[i].modeName+"\")'  type=\"button\" class=\"btn btn-info btn-xs\">查看列表</button>\n" +
                    "            <button  data-toggle=\"modal\" data-target=\"#myModal1\" onclick='connectQuery(\""+data[i].ip +">"+ data[i].dataBaseName+">"+data[i].modeName+"\")'  type=\"button\" class=\"btn btn-warning btn-xs\">查看连接属性</button>\n" +
                    "            <button onclick='delete1(\""+data[i].ip +">"+ data[i].dataBaseName+">"+data[i].modeName+"\")' type=\"button\" class=\"btn btn-danger btn-xs\">删除连接</button></a>");
            }
            loading.hide();
        }
    );
}
<!-- 数据库连接测试 -->
    $("#test").click(function (){
        var ip = $("#ip").val();
        var port = $("#port").val();
        var username = $("#username").val();
        var password = $("#password").val();
        var databases = $("#databases").val();
        var modes = $("#modes").val();
        if(ip==""||port==""||username==""||password==""||databases==""||modes==""){
            alert("ip/端口号/用户名/密码/数据库/模式均不可为空");
            return;
        }
        var loading = $('#fountainG');
        loading.show();
        $.get(
            "/mode/testConnection?ip="+ip+"&port="+port+"&username="+username+"&password="+password +
            "&db="+databases+"&mode="+modes,
            function (data) {
                loading.hide();
                if(data==1){
                    alert("连接成功");
                    $("#addMode").removeAttr("disabled");
                }else{
                    alert("测试连接失败");
                }
            }
        );
    });

<!--  新增模式  -->
    $("#addMode").click(function (){
        var ip = $("#ip").val();
        var port = $("#port").val();
        var username = $("#username").val();
        var password = $("#password").val();
        var databases = $("#databases").val();
        var modes = $("#modes").val();
        if(ip==""||port==""||username==""||password==""||databases==""||modes==""){
            alert("ip/端口号/用户名/密码/数据库/模式均不可为空");
            return;
        }
        var loading = $('#fountainG');
        loading.show();
        $.ajax({
            url : "/mode/addMode",
            type : "post",
            data :JSON.stringify({ip:ip,port:port,username:username,password:password,dataBaseName:databases,
                modeName:modes}),
            contentType : "application/json;charset=UTF-8",
            dataType : "json",
            success : function(data){
                loading.hide();
                if(data == 1){
                    // alert("新增连接成功");
                    $("#myModal").hide();
                    location.href = "/";
                }else{
                    alert("新增连接失败");
                }
            }
        });
    });

//当前数据库连接信息
var currentConnection = "";

    $("#execute").click(function (){
        if(currentConnection == ""){
            alert("请先选择连接！")
        }else if($("textarea").val()==""){
            alert("SQL为空！")
        }else{
            var loading = $('#fountainG');
            loading.show();
            var requestText = {"text":currentConnection,"sql":editor.getValue()};
            $.ajax({
                url:"/mode/executeSql",
                type:"POST",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                data:JSON.stringify(requestText),
                success:function (data){
                    loading.hide();
                    if(data.code == -1){
                        $("#result").html(data.errorMsg);
                    }else{
                        var tempStr = '<table style="" class="table"><thead><tr>';
                        //表头
                        for(let key in data.list[0]){
                            tempStr+='<th>'+key+'</th>';
                        }
                        tempStr+='</tr></thead><tbody>';
                        //表数据
                        for(var k = 0;k<data.list.length; k++){
                            tempStr+='<tr>';
                            for(let key in data.list[k]){
                                tempStr+='<td>'+displayObjectAsString(data.list[k][key])+'</td>';
                            }
                            tempStr+='</tr>';
                        }
                        tempStr+='</tbody></table>';
                        $("#result").html(tempStr);
                    }
                },
                error:function () {
                    loading.hide();
                    alert("请求失败");
                }
            });
        }
    });

    function tableList(e){
        currentConnection = e;
        var loading = $('#fountainG');
        loading.show();
       $.get(
           "/mode/getTables?text="+e,
           function (data) {
               loading.hide();
               var tempUrl = "";
               for(var i=0;i<data.length;i++){
                   tempUrl+="<li onclick=query('\""+data[i]+"\"')><img src='/table.png' style=\"width: 20px;height: 20px;\" />&nbsp;"+data[i]+"</li>";
               }
               $("#oneul").html(tempUrl);
           }
       );
    }

    function displayObjectAsString(variable) {
        // 使用 Object.prototype.toString.call() 判断变量是否是对象类型
        if (Object.prototype.toString.call(variable) === "[object Object]") {
            // 如果是对象，使用 JSON.stringify() 转换为字符串
            console.log("对象的字符串形式：", JSON.stringify(variable));
            return variable.value;
        } else {
            // 如果不是对象，直接显示变量
            return variable;
        }
    }
    function query(e){
        $("textarea").val(e);
        editor.setValue(e)
        var loading = $('#fountainG');
        loading.show();
        var requestText = {"text":currentConnection,"sql":editor.getValue()};
        $.ajax({
            url:"/mode/executeSql",
            type:"POST",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            data:JSON.stringify(requestText),
            success:function (data){
                loading.hide();
                if(data.code == -1){
                    $("#result").html(data.errorMsg);
                }else{
                    var tempStr = '<table style="" class="table"><thead><tr>';
                    //表头
                    for(let key in data.list[0]){
                        tempStr+='<th>'+key+'</th>';
                    }
                    tempStr+='</tr></thead><tbody>';
                    //表数据
                    for(var k = 0;k<data.list.length; k++){
                        tempStr+='<tr>';
                        for(let key in data.list[k]){
                            tempStr+='<td>'+displayObjectAsString(data.list[k][key])+'</td>';
                        }
                        tempStr+='</tr>';
                    }
                    tempStr+='</tbody></table>';
                    $("#result").html(tempStr);
                }
            },
            error:function () {
                loading.hide();
                alert("请求失败");
            }
        });

    }
    function connectQuery(e){
        var loading = $('#fountainG');
        loading.show();
        $.get(
            "/mode/getModeByText?text="+e,
            function (data) {
                loading.hide();
                $("#sjkip").html(data.ip);
                $("#dkh").html(data.port);
                $("#yhm").html(data.username);
                $("#sjk").html(data.dataBaseName);
                $("#ms").html(data.modeName);
            }
        );
    }

    function delete1(e) {
        var msg=confirm("确定吗？亲~~");
        if(msg==true){
            var loading = $('#fountainG');
            loading.show();
            $.get(
                "/mode/deleteMode?text="+e,
                function (data) {
                    loading.hide();
                    if(data == 1){
                        alert("删除成功");
                        location.href = "/";
                    }else{
                        alert("删除失败");
                    }
                }
            );
        }
    }

</script>
</body>
</html>